<script setup lang="ts">
import { ref } from 'vue'
import { useMapLegendInfo, setMapLegendVisible, type MapLegendEntryInfo } from './legend'

const info = ref<MapLegendEntryInfo[]>([])
const visible = ref<boolean>(true)

function showList(ok: boolean) {
  visible.value = ok
}

useMapLegendInfo((_info) => {
  info.value = _info
})

function setVisible(id: string, ok: boolean) {
  setMapLegendVisible(id, ok)
}
</script>
<template>
  <div class="map-legend-list map-pane">
    <div class="pane-heading">
      <div class="pane-title">图层显示</div>
      <div class="pane-tool">
        <i class="mas-icon-min" v-if="visible" @click="showList(false)" />
        <i class="mas-icon-add" v-else @click="showList(true)" />
      </div>
    </div>
    <div class="pane-block" v-if="visible">
      <div class="row info-row" v-for="l in info" :key="l.id" @click="setVisible(l.id, !l.visible)">
        <div class="col-2em">
          <i class="mas-icon-check" v-if="l.visible" />
          <i class="mas-icon-close" v-else />
        </div>
        <div class="col">
          {{ l.name }}
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss">
@import '../style/var';

.map-legend-list {
  user-select: none;
  color: $map-fg;
  min-width: 10em;
  i {
    cursor: pointer;
  }
  .info-row {
    cursor: pointer;
    i {
      // font-size: 1em;
      font-weight: bold;
      border: 1px solid $map-fg;
      border-radius: 3px;
    }
  }
}
</style>
